<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>city.html</title>
		<script type="text/javascript">
			var xmlreq;
			//发送请求，执行回调处理
			//cid：查询city表时使用的parentId
			//selelctObj：c1或c2下拉选择组件对象
			function sendRequest(cid,selectObj){
				//创建XMLHttpRequest对象
				if(window.XMLHttpRequest){
					xmlreq=new XMLHttpRequest();
				}else{
					try{
						xmlreq=new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
						xmlreq=new ActiveXObject("Microsoft.XMLHTTP");
					}
				}
				//以get方式发送请求，传递查询时使用的parentId
				xmlreq.open("get","CityServlet?pid="+cid+"&time="+new Date().getTime());
				//注册回调函数
				xmlreq.onreadystatechange=function(){
					//如果服务器响应完毕，获取响应数据，加载selelctObj所代表的select组件
					if(xmlreq.readyState==4&&xmlreq.status==200){
						//获取服务器响应回来的XML文档对象
						var xmlDoc=xmlreq.responseXML;
						var city=xmlDoc.getElementsByTagName("city");
						selectObj.length=0;//清空下拉单
						selectObj.options.add(new Option("--请选择--","-1"));
						//根据服务器返回的数据循环生成option选项
						for(i=0;i<city.length;i++){
							var id = city[i].getElementsByTagName("id")[0].firstChild.data;
							var name=city[i].getElementsByTagName("name")[0].firstChild.data;
							selectObj.options.add(new Option(name,id));
						}
					}
				}
				//发送请求
				xmlreq.send(null);
			}
			//加载第一个下拉选择组件
			function loadFirst(){
				var c1 =document.getElementById("c1");
				//加载数据库city表中parent=0的数据，然后加载第一个下拉组件
				sendRequest(0,c1);
			}
			//加载第二个下拉选择组件
			function loadSecond(){
				var id=document.getElementById("c1").value;
				var c2=document.getElementById("c2");
				//加载数据库city表中parent=id的数据，然后加载第二个下拉组件
				sendRequest(id,c2);
				
			}
		</script>
	</head>
	<body onload="loadFirst()">
		<h1>下拉单级联</h1><br/>
		所在地区：
		<select id="c1" onchange="loadSecond()"></select>
		<select id="c2"></select>
	</body>
</html>
